/**
 * 顶端组件
 */
const App = React.createClass({
    displayName:'App',
    getInitialState(){
        let isMobile = false;
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            isMobile=true;
        }
        return {
            polylines:[[
                {lat : 47.5, lon : -122.3, alt : 20000 },
                    {lat : 36.2, lon : -115.0, alt : 20000 },
                    {lat : 39.0, lon : -94.6, alt : 20000 },
                    {lat : 30.4, lon : -81.6, alt : 20000 },
            ]],
            flyToLocation:null,
            cesium3DTilesets:[{url:'data/YZ_OSGB/'}],
            showShadows:false,
            homeView:{
                destination : new Cesium.Cartesian3(-3812205.813362556,24768273.172468845,14107518.016503256),
                orientation :{
                    direction:new Cesium.Cartesian3(0.13244712868696487, -0.8606196030956368,-0.49172315063467104),
                    up: new Cesium.Cartesian3(0.08579495142949801, -0.48427769755882344, 0.8706976156831573)
                }
            },
            sceneMode:3,
            isMobile:isMobile
        }
    },
    handlePolylineChange(){
        this.setState({
            polylines:[
                [
                    {lat : 21.5, lon : 122.3, alt : 20000 },
                    {lat : 36.2, lon : 115.0, alt : 20000 },
                    {lat : 39.0, lon : 94.6, alt : 20000 },
                    {lat : 30.4, lon : 81.6, alt : 20000 }
                ]
            ]
        });
    },
    render(){
        const containerStyle = {
            width: '100%',
            height: '100%',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            position: 'fixed'
        };
        const {homeView,polylines,isMobile,sceneMode} = this.state;
        return (
            <div style={containerStyle}>
                <CesiumGlobe
                    homeView={homeView}
                    polylines={polylines}
                    isMobile={isMobile}
                    sceneMode={sceneMode}
                />
                <div style={{position:"fixed",top:'1rem',left:'1rem'}}>
                    <button onClick={this.handlePolylineChange}>变换线条</button>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<App/>, document.getElementById('app'));
